<template>
    <div :style="mainStyle" class="course-box">
        <div class="learn-time">
            <div class="today-learn">
                <text class="course-title">今日已学</text>
                <div class="course-desc">
                    <text class="todayMinute">{{DayMinute}}</text>
                    <text class="minute"> 分钟</text>
                </div>
            </div>
            <div class="today-statistics">
                <div class="statistics-item">
                    <text class="course-title">本月已学</text>
                    <div class="course-desc">
                        <text class="MonthMinute">{{MonthMinute}}</text>
                        <text class="minute"> 分钟</text>
                    </div>
                </div>
                <div class="statistics-center"></div>
                <div class="statistics-item">
                    <text class="course-title">历史总计</text>
                    <div class="course-desc">
                        <text class="TotalMinute">{{TotalMinute}}</text>
                        <text class="minute"> 分钟</text>
                    </div>
                </div>
            </div>
        </div>
        <div class="course-list" v-if="nextLesson.show">
            <image class="course-image"
                   :src="nextLesson.ex.image"></image>
            <div class="course-list-desc">
                <text class="course-list-title">{{nextLesson.ex.name}}</text>
                <div class="course-list-item">
                    <text class="course-list-teacher">主讲老师： {{nextLesson.ex.teacher}}</text>
                    <text class="course-list-time">即将开始</text>
                </div>
            </div>
        </div>
        <list class="list" v-if="lessonsData.length > 0" :style="{height:listHeight, width:listWidth}">
            <cell class="" v-for="lessons in lessonsData">
                <div class="lessons-box">
                    <text class="lessons-date">{{lessons.datetime}}</text>
                    <wxc-simple-flow :list="lessons.ex" :themeColor="themeColor"></wxc-simple-flow>
                </div>
            </cell>
        </list>
        <div class="no-lesson" v-else>
            <text class="more-course">去选课 >></text>
        </div>
    </div>
</template>

<style scoped>
    .no-lesson {
        background-color: #ffffff;
        width: 750px;
        height: 87px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .more-course {
        color: #00BB9A
    }

    .lessons-box {
        flex-direction: row;
        background-color: #ffffff;
    }

    .lessons-date {
        padding-top: 30px;
        padding-left: 30px
    }

    .learn-time {
        background-color: #ffffff;
        width: 750px;
        height: 404px;
        flex-direction: column;
        justify-content: center;
        box-shadow: 0px 2px 32px 0px rgba(67, 74, 84, 0.09);
    }

    .today-learn {
        width: 750px;
        height: 210px;
        padding-top: 63px;
        flex-direction: column;
    }

    .course-title {
        font-size: 36px;
        color: #434A54;
        font-weight: 500;
        text-align: center;
        margin: 5px
    }

    .course-desc {
        flex-direction: row;
        justify-content: center;
        align-items: flex-end
    }

    .todayMinute {
        color: #00BB9A;
        font-size: 96px;
        font-weight: bold;
        height: 100px;
    }

    .minute {
        color: #434A54;
        font-size: 24px;
        height: 35px;
        margin-bottom: 5px;
    }

    .today-statistics {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 200px;
    }

    .statistics-item {
        margin-top: 10px;
        width: 360px;
        height: 190px;
        flex-direction: column;
        padding-top: 45px
    }

    .MonthMinute {
        font-size: 48px;
        color: #E7AE01;
    }

    .TotalMinute {
        font-size: 48px;
        color: #6265F0;
    }

    .statistics-center {
        width: 2px;
        height: 90px;
        background: #EEEEEE;
    }

    .course-list {
        background-color: #FFFFFF;
        flex-direction: row;
        padding: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .course-image {
        width: 152px;
        height: 108px;
    }

    .course-list-desc {
        flex-direction: column;
        width: 530px;
        margin-left: 30px;
        padding-right: 30px;
        height: 108px;
        justify-content: flex-start;
    }

    .course-list-title {
        font-size: 30px;
        color: #434A54;
    }

    .course-list-item {
        margin-top: 40px;
        flex-direction: row;
        justify-content: space-between;
    }

    .course-list-teacher {
        color: #999999;
        font-size: 24px;
    }

    .course-list-time {
        color: #FF0000;
        font-size: 24px;
    }
</style>
<style>
    .title {
        background-color: #ffffff
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../config/Config'
  import User from '../core/net/user'
  import { Utils, WxcSimpleFlow } from 'weex-ui'

  export default {
    components: {
      NavigationBar,
      WxcSimpleFlow,
    },
    data: () => {
      return {
        listHeight: '1234px',
        listWidth: '750px',
        themeColor: {
          lineColor: '#00BB9A',
          pointInnerColor: '#00BB8A',
          pointBorderColor: '#00BB9A',
          highlightTitleColor: '#00BB9A',
          highlightPointInnerColor: '#00BB9A',
          highlightPointBorderColor: '#00BB8A',
        },
        lessonsData: {},
        nextLesson: {
          show:false,
          ex:{}
        },
        DayMinute: 0,
        MonthMinute: 0,
        TotalMinute: 0,
        mainStyle: {},
        webStyle: {height: '1334px', width: '750px'},
      }
    },
    methods: {
      init () {
        this.getDayMinute()
        this.getMonthMinute()
        this.getTotalMinute()
        this.getUserNextLesson()
        this.getUserLessonsTimeAxis()
      },
      getUserNextLesson () {
        User.getUserNextLesson().then((res) => {
          if (res.result) {
            let data = res.data.data
            data.show = true
            data.ex.image = data.course.image_path
            data.ex.name = data.name
            data.ex.teacher = data.course.speaker_name
            this.nextLesson = data
          } else {
            this.nextLesson.show =  false
          }
        })
      },
      getUserLessonsTimeAxis () {
        User.getUserLessonsTimeAxis().then((res) => {
          if (res.result === true) {
            let data = res.data.data
            if (!data || data.length < 1) {

            } else {
              data.forEach((item) => {
                let ex = []
                item.courses.forEach((course) => {
                  ex.push({
                    'date': course.time,
                    'desc': '',
                    'title': course.lesson.name,
                  })
                })
                item.datetime = item.date[0]
                item.ex = ex
              })
              this.lessonsData = data
            }
            // this.DayMinute = res.data.number
          }
        })
      },
      getDayMinute () {
        User.getUserDayMinute().then((res) => {
          if (res.result === true) {
            this.DayMinute = res.data.number
          }
        })
      },
      getMonthMinute () {
        User.getUserMonthMinute().then((res) => {
          if (res.result === true) {
            this.MonthMinute = res.data.number
          }
        })
      },
      getTotalMinute () {
        User.getUserTotalMinute().then((res) => {
          if (res.result === true) {
            this.TotalMinute = res.data.number
          }
        })
      },
    },
    created () {
      this.mainStyle = getEntryPageStyle(Utils)
      this.init()
    },
    activated: function () {
      //keep alive
      if (WXEnvironment.platform === 'Web') {
        this.init()
      }
    },
  }
</script>
